<template>
  <div id="app">
    <!-- 3、在模板中使用 -->
    <v-header></v-header>
    {{msg}}
    <v-footer></v-footer>
    <hr/>
    <v-life></v-life>
    <hr/>
    <v-Resource></v-Resource>
    <hr/>
    <v-axios></v-axios>
    <hr/>
    <p>父子组件通信</p>
    <v-father></v-father>
    <hr/>
    <p>非亲子组件通信</p>
    <div class="friend">
      <v-friend1></v-friend1>
      <v-friend2></v-friend2>
    </div>
    <hr/>
    <div class="router">
      <p>路由跳转演示</p>
      <router-link to="/header">跳转头部</router-link>
      <router-link to="/footer">跳转脚部</router-link>
      <router-link to="/menu">菜单查看</router-link>
      <hr>
      <router-view></router-view>    
    </div>
  </div>
    

  
</template>

<script>
/* 1、引入组件 */
import Header from './components/header.vue';
import Footer from './components/footer.vue';
import Life from './components/life.vue';
import VueResource from './components/vueResource.vue';
import Axios from './components/axios.vue';
import Father from './components/father.vue';
import Friend1 from './components/friend1.vue';
import Friend2 from './components/friend2.vue';

export default {
  name: 'app',
  data () {
    return {
      msg: '这是一个内容组件'
    }
  },
  components: {
     /* 2、挂载组件 */
    'v-header': Header,
    'v-footer': Footer,
    'v-life': Life,
    'v-Resource': VueResource,
    'v-axios': Axios,
    'v-father': Father,
    'v-friend1': Friend1,
    'v-friend2': Friend2
  }
}
</script>

<style lang="scss">
body{
  text-align: center;
}
div#app{
  color: brown;
  width: 70%;
  margin: 0 auto;
}
div.friend{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
div.router{
  padding: 20px;
  border: 1px solid khaki;
}
</style>

